<link rel="stylesheet" type="text/css" href="res/plugins/datepicker/datepicker.css">
<link rel="stylesheet" type="text/css" href="res/plugins/jcrop/jquery.Jcrop.min.css">
<link rel="stylesheet" type="text/css" href="res/admin/css/splashy/splashy.css">
<style>
div.radio {
	margin-right: 3px;
	display: inline-block;
	zoom: 1;
	vertical-align: middle;
}

div.radio, div.radio span, div.radio input {
	width: 18px;
	height: 18px;
}
.radio input[type="radio"]{
	margin-left:0px;
}

.jcrop-holder{
	margin:10px;
}
.jcrop-holder #preview-pane {
  display: block;
  position: absolute;
  z-index: 2000;
  top: 10px;
  right: -280px;
  padding: 6px;
  border: 1px rgba(0,0,0,.4) solid;
  background-color: white;

  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;

  -webkit-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
}
</style>
<ul class="breadcrumb">
	<li><i class="icon-home"></i> <a href="index.html">个人空间</a> <i
		class="icon-angle-right"></i></li>
	<li><a href="#">用户资料</a></li>
</ul>
<div class="tabbable tabbable-custom">
	<ul class="nav nav-tabs">
		<li class="active"><a data-toggle="tab" href="#basic_info">基本资料</a></li>
		<li class=""><a data-toggle="tab" href="#password">密码修改</a></li>
		<li class=""><a data-toggle="tab" href="#image">修改头像</a></li>
	</ul>
	<div class="tab-content">
		<div id="basic_info" class="tab-pane active">
				<form ng-submit="saveBasicInfo()" class="form-horizontal" name="basicInfoForm"
					novalidate >
					<div class="control-group">
						<label class="control-label"><span class="required">*</span> 邮箱: 
						</label>
						<div class="controls">
							<input type="email" class="span6 m-wrap" required name="email" ng-model="user.email">
							<span class="error help-inline" ng-show="registerForm.email.$error.required">请输入邮箱地址</span>
							<span class="error help-inline" ng-show="registerForm.email.$error.email">邮箱地址无效！</span>
							<span class="error help-inline" ng-show="email_unique">邮箱已存在！</span>
						</div>
					</div>
					<div class="control-group">
						<label class="control-label"><span class="required">*</span> 昵称:
						</label>
						<div class="controls">
							<input type="text" class="span6 m-wrap" name="user_name" required ng-minlength=5 ng-model="user.user_name"> 
							<span class="error help-inline" ng-show="registerForm.user_name.$error.required">请输入用户名称</span>
							<span class="error help-inline" ng-show="registerForm.user_name.$error.minlength">不少于5位字符</span>
							<span class="error help-inline" ng-show="user_name_unique">昵称已存在！</span>
						</div>
	
					</div>
					
					<div class="control-group">
						<label class="control-label"> 性别:
						</label>
						<div class="controls">
							<label class="radio">
								<div class="radio">
									<span><input type="radio" name="gender" ng-model="user.gender" value="1" ></span>
								</div> 男
							</label> 
							<label class="radio">
								<div class="radio">
									<span><input type="radio" name="gender" ng-model="user.gender"  value="0"></span>
								</div> 女
							</label>
						</div>
					</div>
					<div class="control-group">
						<label class="control-label"> 出生年月:
						</label>
						<div class="controls">
							<div class="input-append date" date-picker data-date-format="yyyy-mm-dd">
								<input name="birthday" ng_model="user.birthday" class="m-wrap m-ctrl-medium date-picker" placeholder="生日" readonly="" size="16" type="text">
								<span class="add-on"><i class="icon-calendar"></i></span>
							</div>
						</div>
					</div>
					<div class="control-group">
						<label class="control-label"> 联系电话:</label>
						<div class="controls">
							<input type="text" class="span6 m-wrap" name="phone" ng-model="user.phone" maxlength="11"/> 
							<b>
							<span ng-bind-html="user.phone | isPhone"></span>
							</b>
						</div>
					</div>
					<div class="control-group">
						<label class="control-label"> QQ:</label>
						<div class="controls">
							<input type="text" class="span6 m-wrap" name="qq" ng-model="user.qq"> 
						</div>
					</div>
					<div class="control-group">
						<label class="control-label"> 居住地址:</label>
						<div class="controls" region="user">
							<select name="province" style="width:100px;" id="province" ></select>
							<select name="city" style="width:100px;" id="city" ></select>
							<select name="district" style="width:100px;" id="district"></select>
						</div>
					</div>
					<div class="form-actions">
						<button type="submit" class="btn purple">保存修改</button>
					</div>
				</form>
		</div>
		
		<div id="password" class="tab-pane">
			<div class="alert alert-success" id="tip_info" style="display:none;">
			</div>
			<form ng-submit="updatePassword()" class="form-horizontal" name="passwordForm" novalidate >
				<div class="control-group">
					<label class="control-label">当前密码: 
					</label>
					<div class="controls">
						<input type="password" class="m-wrap" name="old_password" id="old_password" >
					</div>
				</div>
				<div class="control-group">
					<label class="control-label">新的密码:
					</label>
					<div class="controls">
						<input type="password" class="m-wrap" name="new_password" id="new_password"> 
					</div>
				</div>
				<div class="control-group">
					<label class="control-label">确认密码:
					</label>
					<div class="controls">
						<input type="password" class="m-wrap" name="re_password" id="re_password">
						<span ng-show="" class="help-inline">两次密码输入不一致</span>
					</div>
				</div>
				
				<div class="form-actions">
					<button type="submit" class="btn purple">保 存</button>
				</div>
			</form>
		</div>
		
		<div id="image" class="tab-pane">
			<div class="control-group">
			
				<div class="controls">
					<input type="text" id="pic_name" style="margin-bottom:0px; padding: 6px 10px;" readOnly>
					<button class="btn" type="button" style="margin-left:-4px;" onClick="head_pic.click();">选择文件 </button>
					
					<input type="file" name="head_pic" id="head_pic" style="display:none" onchange="pic_name.value=this.value">
					<button class="btn green" type="button" ng-click="uploadImage();" style="margin-left:20px;">上传 &nbsp; </button>
				</div>
				
			</div>

			<div class="control-group" id="pic_cut" style="text-align:left;display:none;">
			
				<img ng-src="{{pic_path}}" id="photo"
					alt="[Jcrop Example]" h="380" w="400" />

				<div id="preview-pane">
					<div class="preview-container"
						style="width:100px; height:100px;overflow:hidden">
						<img ng-src="{{pic_path}}" class="jcrop-preview"
							alt="Preview" />
					</div>
				</div>
				<button class="btn green" type="button" ng-click="saveImage();">保存 &nbsp; </button>
			</div>
		</div>
	</div>
</div>
